import { BaseComponent } from "components/common/base-component";
import { ShoppingCartService } from "mobile/services/shoppingCartService";
import { subscribe, guid } from "common";
import { ProductInfo } from "components/product-info/component";
import React = require("react");
import * as ui from "maishu-ui-toolkit";
import { component } from "components/common/component";

type Props = {

}
type State = { productsCount: number, product?: Product };

@component()
export class ProductInfoFooter extends BaseComponent<Props, State> {
    private shoppingCart: ShoppingCartService;
    constructor(props) {
        super(props);
        this.shoppingCart = this.createService(ShoppingCartService);


        setTimeout(() => {
            let c = (this.masterPage.childComponents[ProductInfo.name] || [])[0] as ProductInfo;//this.mobilePage.controls.filter(o => o instanceof ProductInfoControl)[0] as any as ProductInfoControl;
            if (c == null) {
                return;
            }

            console.assert(c != null);
            this.state = {
                productsCount: ShoppingCartService.productsCount.value,
                product: c.props.product
            };

            let self = this;
            let componentDidUpdate = c['componentDidUpdate'] as Function;
            c['componentDidUpdate'] = function () {
                // self.state.product = c.state.product;
                // self.setState(self.state);
                self.setState({ product: c.props.product });
                if (componentDidUpdate)
                    componentDidUpdate();
            }
        }, 100);
    }
    get persistentMembers() {
        return [];
    }
    get hasEditor() {
        return false;
    }
    addToShoppingCart() {

        // let c = this.mobilePage.controls.filter(o => o instanceof ProductInfoControl)[0] as any as ProductInfoControl;
        let c = this.masterPage.childComponents[ProductInfo.name][0] as ProductInfo;
        let shoppingCart = this.createService(ShoppingCartService); //this.props.shoppingCart;
        let product: Product = c.props.product;
        let id = product.Id;

        let count: number;
        let shoppingCartItem = ShoppingCartService.items.value.filter(o => o.ProductId == product.Id)[0];
        if (shoppingCartItem == null) {
            shoppingCartItem = {
                Id: guid(),
                Amount: product.Price * count,
                Count: count,
                ImagePath: product.ImagePath,
                Name: product.Name,
                ProductId: product.Id,
                Selected: true,
                Price: product.Price,
            };
            count = 1;
        }
        else {
            count = shoppingCartItem.Count + 1;
        }

        return shoppingCart.setItemCount(product, count);
    }
    componentDidMount() {
        subscribe(this, ShoppingCartService.productsCount, (value) => {
            this.setState({ productsCount: value })
        })
    }
    render() {
        let { productsCount, product: p } = this.state || {} as State;
        let allowBuy = p != null && (p.Stock == null || p.Stock > 0) && p.OffShelve != true;

        let buttonText = "加入购物车";
        if (p != null && p.Stock == 0) {
            buttonText = "商品已售罄"
        }
        else if (p != null && p.OffShelve == true) {
            buttonText = "商品已下架"
        }
        return (
            <nav className="settlement">
                <a href={'#shopping_shoppingCart'} className="pull-left">
                    <i className="icon-shopping-cart"></i>
                    {productsCount ?
                        <span className="badge bg-primary">{productsCount}</span>
                        : null
                    }
                </a>
                <button disabled={!allowBuy} style={{ width: 120 }}
                    ref={(e: HTMLButtonElement) => e ? e.onclick = ui.buttonOnClick(() => this.addToShoppingCart()) : null}
                    className="btn btn-primary pull-right" >{buttonText}</button>
            </nav>
        );
    }
}
